<template>
  <div class="params">
    <div>
      <el-button type="primary" @click="addParamsHandle">添加规格参数</el-button>
    </div>
    <ElementTable :tableData="tableData" height="500px" style="width:800px;">
      <el-table-column width="100" prop="id" label="规格参数ID"></el-table-column>
      <el-table-column width="100" prop="itemCatId" label="分类ID"></el-table-column>
      <el-table-column show-overflow-tooltip prop="paramData" label="规格参数结构"></el-table-column>
      <el-table-column label="操作" width="90">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </ElementTable>
    <el-dialog
      width="50%"
      title="商品类目选择"
      :visible.sync="paramsVisible"
    >
      <ParamsTree @onTreeData="getTreeData"/>
      <el-dialog
        append-to-body
        width="45%"
        title="添加分组"
        :visible.sync="groupVisible"
      >
        <ParamsAdd :treeData="treeData" @onSuccess="getSuccess" />
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="paramsVisible = false">取消</el-button>
        <el-button type="primary" @click="groupVisibleHandle">确定并添加分组</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api";
import ElementTable from "@/components/element-table";
import ParamsTree from "../ParamsTree"
import ParamsAdd from '../ParamsAdd'

export default {
  name: "ParamsList",
  components: {
    ElementTable,
    ParamsTree,
    ParamsAdd
  },
  data(){
    return{
      tableData:[],
      currentPage: 1,
      paramsVisible: false,
      groupVisible: false,
      treeData:{}
    }
  },
  mounted(){
    this.http()
  },
  methods: {
    http(){
      api.getSelectItemParamAll({
        page: this.currentPage
      }).then(res => {
        if(res.data.status = 200){
          this.tableData = res.data.data.result
        }
      })
    },
    handleDelete(index, row) {
      console.log(row)
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          api.getDeleteItemParamById({
              id: row.id,
            })
            .then((res) => {
              if (res.data.status == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.http(this.currentPage)
              }else{
                  this.$message({
                  type: "error",
                  message: "删除失败",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addParamsHandle(){
      this.paramsVisible = true
    },
    getTreeData(data){
      this.treeData= data
      },
    groupVisibleHandle(){
      this.groupVisible = true
    },
    getSuccess(){
      this.paramsVisible=false,
      this.groupVisible=false,
      this.http()
    },
  },
  
}
</script>

<style scoped>
.params{
  width: 100%;
  height: auto;
  /* margin:0 auto; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>